<template>
    <div>
        <ul class="tabbar">
            <li><router-link class="link" to="/test/aaa">aaa</router-link></li>
            <li><router-link class="link" to="/test/bbb">bbb</router-link></li>
        </ul>
        <router-view></router-view>
        <button class="btn" @click="throwError">throw an error</button>
        <div style="margin-left: 20px;">
            <p>这是<span>中间是span的文本</span></p>
        </div>
        <div><p style="width: 400px;">这段看起来特别长的文本，文本的宽度为400px，测试这段看起来特别长的文本，文本的宽度为400px，测试这段看起来特别长的文本，文本的宽度为400px，测试这段看起来特别长的文本，文本的宽度为400px，测试</p></div>
        <Footer></Footer>
    </div>
</template>
<script>
import Footer from '../common/Footer.vue'
export default {
    components: {
        Footer
    },
    mounted() {
        console.log(TEST_VAR_STRING)
        console.log(TEST_VAR_NUMBER)

        console.log('before set cookie',document.cookie)
        document.cookie = `time=${+new Date()};expires=Wed Jan 01 2220 00:00:00 GMT+0800;path=/`
        console.log('after set cookie',document.cookie)
    },
    methods: {
        throwError(){
            setTimeout(()=>{
                throw new Error('I am an error')
            },0)
        }
    }
}
</script>
<style>
.tabbar{
    margin: 0;
    padding: 0;
    width: 100%;
    display: flex;
    list-style: none;
    justify-content: center;
}
.tabbar li{
    position: relative;
    display: block;
    width:80px;
    height: 50px;
    line-height: 50px;
    background: #dff1e7;
    margin:5px;
}
.tabbar li .link{
    display: block;
    width: 100%;
    height: 100%;
}
.btn{
    display: block;
    margin: 15px auto;
    width: 250px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    color: #000;
    font-size: 16px;
    background: #dff1e7;
    border-radius: 5px;
}
</style>